<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="keywords" content="">
  <meta name="description" content="">
  <title>角色授权</title>
  <link rel="stylesheet" href="../../../component/pear/css/pear.css">
  <link rel="stylesheet" href="../../../admin/css/dimples.css">
  <link rel="icon" href="../../../admin/images/favicon.ico" type="image/x-icon"/>
</head>
<body>
<form class="layui-form" action="">
  <div class="mainBox">
    <div class="main-container">
      <div class="main-container">
        <div id="role-power" class="xm-select-power"></div>
      </div>
    </div>
  </div>
  <div class="bottom">
    <div class="button-container">
      <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit=""
              lay-filter="power-save">
        <i class="layui-icon layui-icon-ok"></i>
        提交
      </button>
      <button type="reset" class="pear-btn pear-btn-sm">
        <i class="layui-icon layui-icon-refresh"></i>
        重置
      </button>
    </div>
  </div>
</form>
<!-- 依 赖 脚 本 -->
<script src="../../../component/layui/layui.js"></script>
<script src="../../../component/pear/pear.js"></script>
<script src="../../../component/pear/dimples.js"></script>
<script>
  layui.use(['xmSelect', 'form', 'ajax'], function () {
    let xmSelect = layui.xmSelect;
    let form = layui.form;
    let ajax = layui.ajax;

    let href = location.href;
    let menuXm = null;

    ajax.send('/system/menu/tree', {}, function (r1) {
      menuXm = xmSelect.render({
        el: '#role-power',
        toolbar: {
          show: true
        },
        autoRow: true,
        filterable: true,
        searchTips: "不支持模糊匹配",
        model: {
          label: {
            type: 'block',
            block: {
              //最大显示数量, 0:不限制
              showCount: 4,
              //是否显示删除图标
              showIcon: false,
            }
          }
        },
        tree: {
          //是否显示树状结构
          show: true,
          //是否展示三角图标
          showFolderIcon: true,
          //是否显示虚线
          showLine: false,
          //间距
          indent: 20,
          //默认展开节点的数组,默认展开新东盛8006
          expandedKeys: [0],
          //是否严格遵守父子模式, 为true时，父节点选中失败
          strict: false,
        },
        height: 'auto',
        name: 'id',
        theme: {
          color: '#52c41a',
        },
        prop: {
          value: 'id',
          name: 'title',
          children: 'children'
        },
        data() {
          return r1.data 	//返回数据遵循官网指定结构
        }
      });

      ajax.send('/system/menu/role/' + parseParamByHref(href, 'roleId'), {}, function (r2) {
        let init = [];
        let data = r2.data;
        for (let i = 0; i < data.length; i++) {
          init[i] = data[i].menuId;
        }
        menuXm.setValue(init);
      });

    });

    form.on('submit(power-save)', function (data) {
      let value = menuXm.getValue();

      let ids = [];
      for (let i = 0; i < value.length; i++) {
        ids[i] = value[i].id;
      }
      data.field.roleId = parseParamByHref(href, 'roleId');
      data.field.menuIds = ids;
      ajax.send('/system/role/menu', {
        type: 'POST',
        data: JSON.stringify(data.field)
      }, function (result) {
        layer.msg(result.msg, {icon: 1, time: 1000}, function () {
          parent.layer.close(parent.layer.getFrameIndex(window.name));
        });
        // 重新拉取权限信息
        ajax.send('/system/user/perm', {}, function (result) {
          saveData('user', result.data);
        })
      })
      return false;
    });
  })
</script>
</body>
</html>